<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css" rel="stylesheet">

        #container {width:380px; height: 800px; }
    </style>
</head>
<body>
<div id="container"></div>
上车地点：<input id="start" type="text" /><br/>
下车地点：<input id="end" type="text" />
</body>
<script type="text/javascript">
    var user_longitude , user_latitude , start_longitude , start_latitude , end_longitude , end_latitude ,dis ;

    window.onLoad  = function() {
        var map = new AMap.Map('container');

        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000,
                // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
            })

            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)

            function onComplete(data) {
                user_longitude = data.position.lng;
                user_latitude = data.position.lat;
                // console.log(data)
            }

            function onError(data) {
                // console.log("定位失败")
            }
        })

        $("#start").blur(function () {
            // 1.获取start中的输入内容
            var startAddress = $("#start").val();
            // 地址正解析
            if (startAddress != null ){
                AMap.plugin('AMap.Geocoder', function () {
                    var geocoder = new AMap.Geocoder({
                        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                        // city: '010'
                    })
                    geocoder.getLocation(startAddress, function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            console.log(result)
                            start_latitude = result.geocodes[0].location.lat;
                            start_longitude = result.geocodes[0].location.lng;

                        } else {
                            alert("输入的地址有误")
                        }
                    })
                })
            }
        })
        $("#end").blur(function () {
            // 1.获取start中的输入内容
            var endAddress = $("#end").val();
            if (endAddress !=null){
                // 地址正解析
                AMap.plugin('AMap.Geocoder', function () {
                    var geocoder = new AMap.Geocoder({
                        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                        // city: '010'
                    })
                    geocoder.getLocation(endAddress, function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            end_latitude = result.geocodes[0].location.lat;
                            end_longitude = result.geocodes[0].location.lng;
                            // 获取到 出发地 —— 目的地之间的距离
                            if (start_longitude != null  && start_latitude != null ){
                                var p1 = [start_longitude , start_latitude];
                                var p2 = [end_longitude, end_latitude];
                                // 返回 p1 到 p2 间的地面距离，单位：米
                                dis = AMap.GeometryUtil.distanceOfLine([p1, p2]);
                                console.log("距离：" + dis)
                                // ajax请求后端获取到订单的预估金额和详情
                                $.ajax({
                                    url:"/customerPhone/orderMoney"
                                    ,dataType:"json"
                                    ,data: {"dis": dis }
                                    ,success:function f(data) {
                                        console.log(data)
                                    }
                                })
                            }

                        } else {
                            alert("输入的地址有误")
                        }
                    })
                })
            }

        })
        // // 异步请求后端 进行下单操作
        // $.ajax({
        //     url:""
        //     ,dataType:"json"
        //     ,data:{
        //         userLatitude : user_latitude
        //         ,userLongitude : user_longitude

        //     },success:function (data){
        //
        //     }
        // })

    }
    var url = 'https://webapi.amap.com/maps?v=1.4.15&key=f643115f73099fcdc0cd6e3e7248a71f&callback=onLoad';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);

</script>
<script>

</script>
</html>